<section class="content-section-column">
  <lv-checkbox-group #checkGroup [ngModel]="selected" (ngModelChange)="change($event)">
    <lv-group [lvGutter]="'16px'" lvWrap="true">
      <ng-container *ngFor="let data of cardData; let i = index">
        <lv-card class="ui-card" lvType="border" [lvTitle]="data" [lvAction]="actionsTpl" [lvChecked]="checkGroup.isChecked(data)">
          <p>
            Basing on the status and activity during last 7 days, several volumes in the pool (Storagepool_multimedia_shenzhen) are
            potentially reclaimable. several volumes in the pool are potentially reclaimable.
          </p>
        </lv-card>
        <ng-template #actionsTpl>
          <div class="ui-card-check-content" [ngClass]="{'ui-card-checked-content':checkGroup.isChecked(data)}">
            <lv-checkbox [lvValue]="data" class="ui-card-checkbox"></lv-checkbox>
          </div>
          <lv-group lvGutter="16px">
            <button class="ui-button" lv-button lvType="link">Remove</button>
            <button class="ui-button" lv-button lvType="link">Confirm</button>
          </lv-group>
        </ng-template>
      </ng-container>
    </lv-group>
  </lv-checkbox-group>

  <p>Selected: {{ selected }}</p>
</section>
